<script setup lang="ts" name="team">
import { ref, watch } from 'vue';
import { useRequest } from 'vue-request';
import { distributionCount, distributionLevelList } from '/@/apis/userApi';
import { i18nTranslate } from '/@/i18n';
import { initName } from '/@/utils';
import { useUserId } from '/@/hooks/index';
const { getUserId } = useUserId();
const userId = getUserId();
const linkValue = ref('https://www.giottus.com/?refcode=RRPSFAS');
const tabActive = ref(1);
const showPopover = ref(false);
const popoverValue = ref(i18nTranslate('All'));
const type = ref(0);
const finviteesNum = ref(0);
const factivatorsNum = ref(0);
const listData = ref(<any>{});
const teamList = ref<any[]>([]);
const infoData = ref(<any>{});
const actions = [
  { text: i18nTranslate('All'), value: 0 },
  { text: i18nTranslate('Activate'), value: 1 },
  { text: i18nTranslate('Notactivated'), value: 2 },
];
const onSelect = (action: any) => {
  popoverValue.value = action.text;
  type.value = action.value;
  getList();
}
useRequest(distributionCount, {
  defaultParams: [{memberId : userId}],
  onSuccess(data: any) {
    infoData.value = data;
  },
})
const getList = () => {
  useRequest(distributionLevelList, {
    defaultParams: [{memberId : userId, type: type.value}],
    onSuccess(data: any) {
      listData.value = data;
      teamList.value = tabActive.value === 1 ? listData.value.oneLevel : tabActive.value === 2 ? listData.value.twoLevel : tabActive.value === 3 ? listData.value.threeLevel : [];
      finviteesNum.value = tabActive.value === 1 ? listData.value.oneInvitePeopleNum : tabActive.value === 2 ? listData.value.twoInvitePeopleNum : tabActive.value === 3 ? listData.value.threeInvitePeopleNum : 0;
      factivatorsNum.value = tabActive.value === 1 ? listData.value.oneActivationPeopleNum : tabActive.value === 2 ? listData.value.twoActivationPeopleNum : tabActive.value === 3 ? listData.value.threeActivationPeopleNum : 0;
    },
  })
}
getList();
watch(tabActive, () => {
  type.value = 0;
  popoverValue.value = 'All';
  getList();
});
</script>

<template>
  <div class="team">
    <AppBar back :primary="true" :title="$t('Recommend')"></AppBar>
    <div class="top_box flex-between">
      <div class="top_left_box">
        <p class="top_title">{{ $t('Invitationtoearnmoney') }}</p>
        <p class="top_name">{{ $t('Invitefriendstotopupandgetcashback') }}</p>
      </div>
      <div class="img_box">
        <img :src="$img('me/team.png')" />
      </div>
    </div>
    <div class="count_box flex-between">
      <div class="count_item">
        <p class="count_name">{{ $t('TodayCommission') }}</p>
        <p class="count_num">${{ infoData.todayCommission }}</p>
      </div>
      <div class="count_item">
        <p class="count_name">{{ $t('TotalCommission') }}</p>
        <p class="count_num">${{ infoData.totalCommission }}</p>
      </div>
    </div>
    <div class="count_box flex-between">
      <div class="count_item">
        <p class="count_name">{{ $t('Numberofinvitees') }}</p>
        <p class="count_num">{{ infoData.totalPeople }}</p>
      </div>
      <div class="count_item">
        <p class="count_name">{{ $t('Numberofactivators') }}</p>
        <p class="count_num">{{ infoData.topUpPeople }}</p>
      </div>
    </div>
    <div class="link_box">
      <p>{{ $t('InvitationLink') }}</p>
      <InputBase v-model="infoData.invitationLink" readonly class="input_box">
        <template #append>
          <div class="copy_box" @click="$copyText(infoData.invitationLink)">{{ $t('Copy') }}</div>
        </template>
      </InputBase>
    </div>
    <div class="content_box">
      <div class="content_tab_box flex-between">
        <div class="content_tab_item" :class="tabActive === 1 ? 'active_box' : ''" @click="tabActive = 1">
          <p class="content_title">{{ $t('Level') }}1</p>
          <p class="content_name">{{ $t('commissions') }}</p>
          <p class="content_num">{{ listData.oneLevelPercentage || 0 }}%</p>
        </div>
        <div class="content_tab_item" :class="tabActive === 2 ? 'active_box' : ''" @click="tabActive = 2">
          <p class="content_title">{{ $t('Level') }}2</p>
          <p class="content_name">{{ $t('commissions') }}</p>
          <p class="content_num">{{ listData.twoLevelPercentage || 0 }}%</p>
        </div>
        <div class="content_tab_item" :class="tabActive === 3 ? 'active_box' : ''" @click="tabActive = 3">
          <p class="content_title">{{ $t('Level') }}3</p>
          <p class="content_name">{{ $t('commissions') }}</p>
          <p class="content_num">{{ listData.threeLevelPercentage || 0 }}%</p>
        </div>
      </div>
      <div class="content_list_box">
        <div class="content_count_box flex-between">
          <div>
            <p class="content_list_name">{{ $t('Numberofinvitees') }}：<span class="content_list_num">{{ finviteesNum }}</span></p>
            <p class="content_list_name mart_10">{{ $t('Numberofactivators') }}：<span class="content_list_num">{{ factivatorsNum }}</span></p>
          </div>
          <van-popover v-model:show="showPopover" placement="bottom-end" :actions="actions" @select="onSelect" class="team-popover">
            <template #reference>
              <div class="popover_box">
                {{ $t(popoverValue) }}
                <van-icon :name="showPopover ? 'arrow-up' : 'arrow-down'" />
              </div>
            </template>
          </van-popover>
        </div>
        <div v-if="teamList.length">
          <div class="team_list_li" v-for="teamItem in teamList" :key="teamItem.id">
            <div class="team_list_li_left">
              <div class="avater">
                <img :src="$img('avatar.png')">
              </div>
              <div>
                <div class="align-center p1">
                  ID:{{ teamItem.uuid }}
                  <div v-if="teamItem.isTopUp" class="circular" />
                </div>
                <p class="p2">{{ initName(teamItem.phone) }}</p>
              </div>
            </div>
            <div class="time">
              {{ $YMDHms(teamItem.createTime) }}
            </div>
          </div>
        </div>
        <van-empty v-else :description="$t('Nodata')" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.team {
  .top_box {
    padding: 0 30px;
    .top_left_box {
      width: 50%;
    }
    .top_title {
      color: rgba(255, 255, 255,0.85);
      font-size: 48px;
      font-weight: 700;
      line-height: 60px;
    }
    .top_name {
      color: rgba(255, 255, 255,0.45);
      font-size: 26px;
      line-height: 40px;
      margin-top: 11px;
    }
    .img_box {
      width: 50%;
      height: auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .count_box {
    margin: 24px 30px;
    .count_item {
      width: 50%;
      .count_name {
        color: rgba(255, 255, 255,0.65);
        font-size: 22px;
      }
      .count_num {
        color: rgb(0, 0, 0);
        font-size: 40px;
        margin-top: 15px;
      }
    }
  }
  .link_box {
    border-radius: 16px;
    box-shadow: 0px 2px 4px 0px rgba(255, 255, 255,0.07);
    background: rgb(255, 255, 255);
    color: rgba(255, 255, 255,0.65);
    font-size: 28px;
    margin: 0 30px;
    padding: 30px 27px 30px 24px;
    .input_box {
      margin: 19px 0 0 0;
      padding-bottom: 0;
      .copy_box {
        height: 65px;
        line-height: 65px;
        border-radius: 8px;
        background-color: #0063f5;
        color: #ffffff;
        font-size: 24px;
        padding: 0 10px;
        margin-left: 10px;
      }
    }
  }
  .content_box {
    margin: 20px 30px;
    padding: 6px 15px 20px 15px;
    border-radius: 16px;
    box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5);
    background: linear-gradient(180.00deg, rgb(223, 233, 250),rgb(149, 188, 249) 100%);
    .content_tab_box {
      margin: 0 10px;
      .content_tab_item {
        width: calc((100% - 20px) / 3);
        height: 154px;
        text-align: center;
        .content_title {
          color: rgba(255, 255, 255,0.85);
          font-size: 32px;
          font-weight: 700;
          line-height: 40px;
          margin-top: 25px;
        }
        .content_name {
          color: rgba(255, 255, 255,0.65);
          font-size: 24px;
          line-height: 32px;
        }
        .content_num {
          color: rgba(255, 255, 255,0.65);
          font-size: 24px;
          line-height: 32px;
        }
      }
      .active_box {
        background-image: url('/@images/me/tab_active.png');
        background-size: 100% 100%;
      }
    }
    .content_list_box {
      border-radius: 20px;
      background: #ffffff;
      .content_count_box {
        padding: 18px 18px 10px 30px;
        .content_list_name {
          color: rgba(255, 255, 255,0.65);
          font-size: 24px;
        }
        .content_list_num {
          color: rgba(255, 255, 255,0.85);
        }
        .popover_box {
          height: 56px;
          line-height: 56px;
          border: 1px solid rgb(203, 203, 203);
          border-radius: 10px;
          color: rgb(36, 34, 58);
          font-size: 26px;
          padding: 0 20px;
          display: flex;
          align-items: center;
          white-space: nowrap;
        }
      }
      .team_list_li {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255,0.09);;
        padding: 20px 0;
        margin: 0 15px;
        align-items: center;
  
        .team_list_li_left {
          display: flex;
        }
  
        .avater {
          width: 68px;
          height: 68px;
          border-radius: 50%;
          margin-right: 22px;
  
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
  
        .p1 {
          color: rgba(255, 255, 255,0.85);
          font-size: 32px;
          position: relative;
          margin-bottom: 10px;
  
          .circular {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #0063f5;
            margin-left: 10px;
          }
        }
  
        .p2 {
          color: rgba(255, 255, 255,0.65);
          font-size: 22px;
        }
  
        .time {
          color: rgba(255, 255, 255,0.45);
          font-size: 24px;
        }
      }
      .team_list_li:last-child {
        border-bottom: 0;
      }
    }
  }
  .mart_10 {
    margin-top: 10px;
  }
}
</style>
<style lang="scss">
.team {
  .var-app-bar {
    background-color: #f6f7fb;
  }
  .hl-input-box .var-input .var-field-decorator__controller {
    padding: 0 5px;
  }
  .hl-input-box .var-input .var-input__input {
    color: rgb(108, 117, 125);
    font-size: 22px;
  }
}
.team-popover .van-popover__action {
  padding: 0;
}
</style>
